<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    在线引入vue.js-->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>-->
<!--    引入本地的vue.js文件-->
    <script src="../js/vue.js"></script>
</head>
<body>

<!--初始化容器-->
<div id="app">
    <h1>这是式第一个div</h1>
</div>


<div class="app">
    <h1>这是第二个div</h1>
</div>


<script>
    // 1.每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
 const  app =  new Vue({
     template:"<div>" +
             "<span>hello vue</span>" +
             "<span>hello java2425</span>" +
             "</div>"
 })

    // 2. 将vue实例和容器进行绑定
    // app.$mount(document.getElementById("app"))
    app.$mount("#app")

</script>
<!--
        1. 一个vue实例可以绑定几个容器
           一个vue实例只能绑定一个容器   一个容器也只能被一个vue实例绑定
        2. 通过vue实例中template配置项实现数据的渲染会覆盖节点对象中原有数据


       注意:  通过template字符串的方式实现页面数据的渲染   那么如果需要渲染的数据比较复杂 则存在字符串拼接问题,
              不便于代码的维护,可以通过js中支持的模板语法编写页面结构  `   `

-->
</body>
</html>